<div
  #listbox
  class="po-listbox"
  [class.po-listbox-check]="type === 'check' || type === 'option'"
  [attr.data-type]="type"
  [attr.p-size]="size"
  [hidden]="visible"
>
  <div #popupHeaderContainer>
    <ng-content select="[p-popup-header-template]"></ng-content>
  </div>

  @if (!hideSearch && type === 'check') {
    <po-search-list
      #searchElement
      (p-change)="callChangeSearch($event)"
      [p-literals]="literalSearch"
      [p-field-value]="fieldValueSearch"
      [p-placeholder]="placeholderSearch"
      [p-size]="size"
    ></po-search-list>
  }

  @if (checkTemplate() && !listboxSubitems) {
    <ul #listboxItemList cdkListbox [cdkListboxMultiple]="type === 'check'" class="po-listbox-list">
      @if (type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll) {
        <li
          cdkOption="selectAll"
          [attr.aria-checked]="checkboxAllValue === null ? 'mixed' : checkboxAllValue"
          class="po-listbox-item-type-check"
          (click)="changeAll.emit()"
          (keydown)="changeAllEmit($event)"
          (keydown)="onSelectAllCheckboxKeyDown($event)"
        >
          <po-item-list
            [p-selected]="checkboxAllValue"
            p-type="check"
            [p-label]="literals.selectAll"
            p-value="selectAll"
            [p-checkbox-value]="checkboxAllValue"
            [p-size]="size"
          >
          </po-item-list>
        </li>
      }
      @for (item of items; track item) {
        <li
          [class.po-listbox-item]="visible"
          [class.po-listbox-item-type-check]="type === 'check'"
          [cdkOption]="item[fieldLabel]"
          [cdkOptionDisabled]="
            returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options
          "
          [attr.aria-selected]="isSelectedItem(item) || item.selected"
          (click)="onSelectItem(item)"
          (keydown)="onKeyDown(item, $event)"
        >
          @if (item.options) {
            <label class="po-combo-item-title">
              {{ item.label }}
            </label>
          }
          @if (returnBooleanValue(item, 'visible') !== false) {
            <po-item-list
              [p-disabled]="returnBooleanValue(item, 'disabled')"
              [p-visible]="returnBooleanValue(item, 'visible')"
              [p-checkbox-value]="isSelectedItem(item)"
              [attr.data-item-list]="formatItemList(item)"
              [p-label]="item[fieldLabel]"
              [p-value]="item[fieldValue]"
              [p-selected]="isSelectedItem(item) || item.selected"
              [p-active-tabs]="item.active"
              [p-separator]="item.separator || separator"
              [p-danger]="item.danger || item.type === 'danger'"
              [p-icon]="item.icon"
              [p-type]="type"
              [p-item]="item"
              [p-tab-hide]="item.hide"
              [p-is-tabs]="isTabs"
              [p-field-value]="fieldValue"
              [p-field-label]="fieldLabel"
              [p-template]="template"
              [p-template-context]="item"
              (p-selectcheckbox-item)="checkboxClicked($event)"
              (p-selectcombo-item)="optionClicked(item)"
              (p-emit-item-tabs)="onSelectTabs($event)"
              (p-activated-tabs)="onActivatedTabs($event)"
              [p-search-value]="searchValue"
              [p-filter-mode]="filterMode"
              [p-filtering]="isFiltering"
              [p-size]="size"
              [p-should-mark-letter]="shouldMarkLetters"
              [p-compare-cache]="compareCache"
              [p-combo-service]="comboService"
              [p-keys-label]="keysLabel"
            ></po-item-list>
          }
        </li>
      }

      @if (footerActionListbox) {
        @if (placeholderListbox) {
          <div class="po-item-list" aria-hidden="true">
            <span>{{ placeholderListbox }}</span>
          </div>
        }

        @if (!placeholderListbox && !items.length) {
          <div class="po-item-list" aria-hidden="true">
            <span>{{ literals.noItems }}</span>
          </div>
        }

        <li
          class="po-listbox-item"
          (click)="handleFooterActionListbox()"
          (keydown)="onKeyDown({ type: 'footerAction' }, $event)"
          cdkOption="footerActionListbox"
        >
          <po-item-list [p-label]="literals.footerActionListbox" p-separator [p-size]="size" />
        </li>
      }
    </ul>
  } @else {
    @if (!items.length && !isServerSearching && type !== 'action' && !footerActionListbox) {
      <div class="po-listbox-container-no-data po-text-center">
        <span> {{ literals.noItems }}</span>
      </div>
    }
  }

  @if (listboxSubitems) {
    <ul cdkListbox class="po-listbox-list po-listbox-dropdown">
      @if (!currentGroup) {
        @for (item of currentItems; track item) {
          <li
            #listboxItem
            [class.po-listbox-item]="visible"
            [cdkOption]="item[fieldLabel]"
            [cdkOptionDisabled]="returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false"
            [attr.aria-selected]="isSelectedItem(item) || item.selected"
            (click)="onSelectItem(item, $event)"
            (keydown)="onKeyDown(item, $event)"
          >
            @if (item.subItems?.length) {
              <po-item-list
                [p-label]="item.label"
                [p-item]="item"
                [p-separator]="item.separator || separator"
                [p-icon]="'po-icon-arrow-right'"
                [p-icon-position]="'right'"
              >
              </po-item-list>
            } @else if (!item.subItems?.length && returnBooleanValue(item, 'visible') !== false) {
              <po-item-list
                class="po-listbox-item-sub"
                [p-disabled]="returnBooleanValue(item, 'disabled')"
                [p-visible]="returnBooleanValue(item, 'visible')"
                [p-label]="item[fieldLabel]"
                [p-item]="item"
                [p-icon]="item.icon"
                [p-separator]="item.separator || separator"
                [p-danger]="item.type === 'danger'"
                [p-selected]="isSelectedItem(item) || item.selected"
              >
              </po-item-list>
            }
          </li>
        }
      }

      @if (currentGroup) {
        <li
          #listboxGroupHeader
          class="po-listbox-group-header"
          [cdkOption]="'back-option'"
          [attr.aria-label]="literals?.backToPreviousGroup"
          (click)="goBack($event)"
          (keydown)="onKeydownGoBack($event)"
        >
          <po-icon class="po-field-icon" [p-icon]="'po-icon-arrow-left'"></po-icon>
          <po-tag [p-value]="currentGroup.label"></po-tag>
        </li>

        @for (subItem of currentItems; track subItem.label) {
          @if (subItem.subItems?.length) {
            <li
              [cdkOption]="subItem[fieldLabel]"
              (click)="onSelectItem(subItem, $event)"
              (keydown)="onKeyDown(subItem, $event)"
            >
              <po-item-list
                [p-label]="subItem.label"
                [p-item]="subItem"
                [p-separator]="subItem.separator || separator"
                [p-icon]="'po-icon-arrow-right'"
                [p-icon-position]="'right'"
              >
              </po-item-list>
            </li>
          } @else if (!subItem.subItems?.length && returnBooleanValue(subItem, 'visible') !== false) {
            <li
              [cdkOption]="subItem[fieldLabel]"
              (click)="onSelectItem(subItem, $event)"
              (keydown)="onKeyDown(subItem, $event)"
            >
              <po-item-list
                class="po-listbox-item-sub"
                [p-disabled]="returnBooleanValue(subItem, 'disabled')"
                [p-visible]="returnBooleanValue(subItem, 'visible')"
                [p-label]="subItem[fieldLabel]"
                [p-item]="subItem"
                [p-icon]="subItem.icon"
                [p-separator]="subItem.separator || separator"
                [p-danger]="subItem.type === 'danger'"
                [p-selected]="isSelectedItem(subItem) || subItem.selected"
              >
              </po-item-list>
            </li>
          }
        }
      }
    </ul>
  }

  @if (isServerSearching && type !== 'action') {
    <div [class.po-listbox-container-loading-default]="!infiniteLoading">
      <po-loading-overlay [p-size]="getSizeLoading()" [p-text]="getTextLoading()"></po-loading-overlay>
    </div>
  }
</div>
